<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点餐系统-订单(管理员)</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="center">
        <nav>
            <div>外卖点餐系统</div>
            <img height="80px" src="./image/logo1.png" alt="加载失败">
            <div class="menu" v-show='!isLogin()'>
                <a href="login.html">登录</a>
            </div>
            <div class="menu" v-show="isLogin()">
                <a v-on:click="logout()">退出登录</a>
                <a href="admin-dish.html">菜品管理</a>
                <a href="admin-order.html">订单管理</a>
                <a href="personal-center.html">个人中心</a>
                <a>欢迎管理员, {{name}}!</a>
            </div>
        </nav>
        <div class="notice" v-show='!isLogin()'>
            请先<a href="login.html">登陆!</a>
        </div>
        <div class="container" v-show='isLogin()'>
            <table cellspacing="0">
                <tr class="table-header tr-order">
                    <th>订单id</th>
                    <th>用户id</th>
                    <th>是否完结</th>
                    <th>订单时间</th>
                    <th>查看详情</th>
                </tr>
                <tr v-for="order in orders" class="tr-order">
                    <td>{{order.orderId}}</td>
                    <td>{{order.userId}}</td>
                    <td><input type="checkbox" v-model="order.isDone"
                            v-on:change="changeStatus(order.orderId, order.isDone)"></td>
                    <td>{{order.time}}</td>
                    <td>
                        <button class="btn" v-on:click='getOrderDetail(order.orderId)'>查看详情</button>
                        <button class="btn" v-on:click='getUser(order.userId)'>查看地址</button>
                    </td>
                </tr>
            </table>
            <div class="dialog" v-if="curOrder != null">
                <table cellspacing="0">
                    <tr class="table-header">
                        <th>菜品</th>
                        <th>价格</th>
                    </tr>
                    <tr v-for="dish in curOrder.dishes" class="tr-order-detail">
                        <td>{{dish.name}}</td>
                        <td>{{dish.price / 100}}</td>
                    </tr>
                </table>
            </div>
            <div class="dialog-footer" v-if="curOrder != null">
                <div>
                    总金额: {{curOrderPrice() / 100}}
                </div>
                <button v-on:click="curOrder = null" class="btn cancel-order-btn">关闭</button>
            </div>
            
            <!-- 查看地址 -->
            <div class="dialog" v-if="userOrder != null">
                <table cellspacing="0">
                    <tr class="table-header">
                        <th>地址</th>
                        <th>手机号</th>
                    </tr>
                    <tr class="tr-order-detail">
                        <td>{{userOrder.address}}</td>
                        <td>{{userOrder.numb}}</td>
                    </tr>
                </table>
            </div>

            <div class="dialog-footer" v-if="userOrder != null">
                <button v-on:click="userOrder=null" class="btn cancel-order-btn">关闭</button>
            </div>
        </div>
    </div>
    <!-- 引入 JQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入自定制逻辑 -->
    <script src="js/admin-order.js"></script>
    <script>
        // 调用 checkLogin 来检测当前登录状态. 
        app.checkLogin();
    </script>
</body>

</html>